<div id="pm_settings">
    <div class="settings">
        <p class="alert alert-info" ng-if="mobileMode" translate translate-context="Info" translate-comment="responsiveness info">This page is only available on larger resolution devices. If you are on a  phone, try landscape mode, or visit on a computer instead.</p>
        <restore-administrator-panel ng-if="keyStatus === 2"></restore-administrator-panel>
        <div class="row" ng-show="isFree === true">
            <section class="setting pm_form full">
                <header-block class="settingsDomains-header-free">
                    <h2
                        class="settingsDomains-title-free"
                        translate
                        translate-context="Title">Domains</h2>
                </header-block>

                <p class="alert alert-info" translate-context="Domains" translate>Use your own domain with ProtonMail and use your own email address, e.g. yourname@yourdomain.com. To enable this feature, <a ui-sref="secured.dashboard({scroll: true})">upgrade to ProtonMail Plus</a>.</p>
            </section>
        </div>

        <div class="row" id="settingsDomains" ng-show="isAdmin === true">
            <section class="setting pm_form full">

                <header-block class="settingsDomains-header-domain">
                    <h2
                        class="settingsDomains-title-domain"
                        translate
                        translate-context="Title">Domains</h2>

                    <small class="settingsDomains-details-domain" ng-if="isAdmin">
                        {{ organization.UsedDomains }} / {{ organization.MaxDomains }} <span translate-context="how many domains are in use" translate>domains used.</span>
                        <a
                            class="settingsDomains-link-domain"
                            ui-sref="secured.dashboard({scroll: true})"
                            data-hide-upgrade="domain"
                            translate-context="Action"
                            translate-comment="link to dashboard page" translate>Upgrade your plan</a>
                    </small>
                </header-block>

                <p
                    class="alert alert-info"
                    ng-show="organization.UsedDomains === organization.MaxDomains"
                    translate-context="Domains information" translate>You have reached your custom domain limit. <a ui-sref="secured.dashboard">Click here</a> to upgrade your plan to add more.</p>
                <div class="margin">
                    <button ng-hide="organization.UsedDomains === organization.MaxDomains" type="button" class="pm_button primary" ng-click="addDomain()" translate-context="Action" translate-comment="button to add custom domains" translate>Add custom domain</button>
                    <button type="button" class="pm_button" ng-click="refreshStatus()" translate-context="Action" translate>Refresh domain status</button>
                </div>
                <div class="pm_table">
                    <table class="bordered domains" ng-show="domains.length > 0" id="domainsTable">
                        <thead>
                            <tr>
                                <th scope="col" style="width: 10rem" class="domain" translate-context="Title" translate>Domain</th>
                                <th scope="col" style="width: 30rem" class="status" translate-context="Title" translate>Current status</th>
                                <th scope="col" style="width: 6rem" class="text-right actions" translate-context="Title" translate>Actions</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="domain in domains">
                            <tr ng-class="{ 'error': domain.State === 0 || domain.State === 2 }">
                                <td class="domain">
                                    <strong>
                                        <i class="fa" ng-class="{
                                            'fa-check text-green': domain.State === 1 && domain.Addresses.length > 0 && domain.MxState === 3,
                                            'fa-exclamation-triangle text-red': domain.State === 0 || domain.State === 2 || domain.Addresses.length === 0 || domain.MxState === 1 || domain.MxState === 2
                                        }"></i>
                                        {{ domain.DomainName }}
                                    </strong>
                                </td>
                                <td class="status">
                                    <button type="button" class="progress pm_button" ng-click="verification(domain)" ng-class="{
                                        'success': domain.VerifyState === 2,
                                        'error': domain.VerifyState === 1
                                    }">
                                        <i class="fa fa-warning" ng-show="(domain.VerifyState === 1)"></i> <span translate-context="domain status" translate>Verification</span>
                                    </button>
                                    <button type="button" class="progress pm_button" ng-click="addAddresses(domain)" ng-disabled="domain.State === 0" ng-class="{'success': domain.State === 1 && domain.Addresses.length > 0}">
                                        <span ng-show="domain.Addresses.length > 0">{{ domain.Addresses.length }}</span> <span translate translate-context="Action">Addresses</span>
                                    </button>
                                    <button type="button" class="progress pm_button" ng-click="mx(domain)" ng-disabled="domain.State === 0" ng-class="{
                                        'success': domain.MxState === 3,
                                        'error': domain.MxState === 2 || domain.MxState === 1
                                    }">
                                        <i class="fa" ng-hide="(domain.MxState === 0)" ng-class="{
                                            'fa-check': (domain.MxState === 3),
                                            'fa-warning': (domain.MxState === 1 || domain.MxState === 2)
                                        }"></i> MX
                                    </button>
                                    <button type="button" class="progress pm_button" ng-disabled="domain.State === 0" ng-click="spf(domain)" ng-class="{
                                        'success': domain.SpfState === 3,
                                        'error': domain.SpfState === 2 || domain.SpfState === 1
                                    }">
                                        <i class="fa" ng-hide="(domain.SpfState === 0)" ng-class="{
                                            'fa-check': (domain.SpfState === 3),
                                            'fa-warning': (domain.SpfState === 1 || domain.SpfState === 2)
                                        }"></i> SPF
                                    </button>
                                    <button type="button" class="progress pm_button" ng-disabled="domain.State === 0" ng-click="dkim(domain)" ng-class="{
                                        'success': domain.DkimState === 4 || domain.DkimState === 5,
                                        'error': domain.DkimState === 3 || domain.DkimState === 2 || domain.DkimState === 1
                                    }">
                                        <i class="fa" ng-hide="(domain.DkimState === 0)" ng-class="{
                                            'fa-check': (domain.DkimState === 4),
                                            'fa-warning': (domain.DkimState === 1 || domain.DkimState === 2 || domain.DkimState === 3),
                                            'fa-minus-circle': (domain.DkimState === 5)
                                        }"></i> DKIM
                                    </button>
                                    <button type="button" class="progress pm_button" ng-click="dmarc(domain)" ng-disabled="domain.State === 0" ng-class="{
                                        'success': domain.DmarcState === 3,
                                        'error': domain.DmarcState === 2 || domain.DmarcState === 1
                                    }">
                                        <i class="fa" ng-hide="(domain.DmarcState === 0)" ng-class="{
                                            'fa-check': (domain.DmarcState === 3),
                                            'fa-warning': (domain.DmarcState === 1 || domain.DmarcState === 2)
                                        }"></i> DMARC
                                    </button>
                                </td>
                                <td class="text-right">
                                    <button
                                        type="button"
                                        class="pm_button round"
                                        ng-hide="goodSetup(domain)"
                                        ng-click="wizard(domain)"
                                        pt-tooltip-translate-context="button to configure the domain"
                                        pt-tooltip-translate="Wizard">
                                        <i class="fa fa-magic"></i>
                                    </button>
                                    <button type="button" class="remove pm_button round" ng-click="deleteDomain(domain)" pt-tooltip-translate="Delete" pt-tooltip-translate-context="Action">
                                        <i class="fa fa-trash-o"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr ng-if="domain.State === 2">
                                <td colspan="2">
                                    <p class="alert alert-warning" translate-context="Domain status" translate>Check your DNS settings.</p>
                                </td>
                                <td></td>
                            </tr>
                            <tr ng-if="domain.State === 0">
                                <td colspan="2">
                                    <p class="alert alert-warning">
                                        <span
                                            translate-comment="Setup Error: Please run the [setup wizard] to correct configuration errors"
                                            translate-context="domains list"
                                            translate>Setup Error: Please run the</span>
                                        <a class="pm_button link" href="#" ng-click="wizard(domain)">
                                            <i class="fa fa-magic"></i> <span translate translate-context="Action">Setup Wizard</span></a>
                                        <span
                                            translate-comment="Setup Error: Please run the [setup wizard] to correct configuration errors"
                                            translate-context="domains list"
                                            translate>to correct configuration errors.</span>
                                    </p>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="alert alert-info" ng-show="domains.length === 0">
                    <p>
                        <strong translate-context="domains list" translate>No custom domain found</strong>
                    </p>
                    <p translate-context="domains list" translate>Click on 'ADD CUSTOM DOMAIN' button to add a domain.</p>
                </div>
            </section>
            <p>&nbsp;</p>
            <section class="setting pm_form full">

                <header-block class="settingsDomains-header-custom">
                    <h2
                        class="settingsDomains-title-custom"
                        translate
                        translate-context="Title">Custom Domain Addresses</h2>

                    <small class="settingsDomains-details-custom" ng-if="isAdmin">
                        {{ organization.UsedAddresses }} / {{ organization.MaxAddresses }}
                        <span
                            translate-comment="how many addresses are in use"
                            translate-context="Info"
                            translate>addresses used.</span>

                        <a
                            class="settingsDomains-link-custom"
                            ui-sref="secured.dashboard({scroll: true})"
                            data-hide-upgrade="domain"
                            translate-context="Action"
                            translate-comment="link to dashboard page" translate>Upgrade your plan</a>
                    </small>
                </header-block>

                <div class="margin-bottom" ng-repeat="domain in domains">
                    <p>
                        <i class="fa" ng-class="{'fa-check-circle-o text-green': domain.State === 1, 'fa-exclamation-triangle text-red': domain.State === 0 || domain.State === 2}"></i> <strong>{{ domain.DomainName }}</strong>
                    </p>
                    <p>
                        <address-btn-actions
                            data-model="domain"
                            data-action="add"
                            class="pm_button primary"></address-btn-actions>

                    </p>
                    <p
                        class="alert alert-info"
                        ng-show="domain.Addresses.length > 0"
                        translate-context="Domains information" translate>Addresses must be disabled before they can be deleted. Addresses can only be deleted if all messages associated with that address are deleted.</p>
                    <div class="pm_table">
                        <table class="pm_form bordered" ng-show="domain.Addresses.length > 0">
                            <thead>
                                <tr>
                                    <th scope="col" translate-context="Title" translate-comment="table heading for the domains page table listing of addresses" translate>Name</th>
                                    <th scope="col" translate-context="Title" translate-comment="table heading for the domains page table listing of addresses" translate>Address</th>
                                    <th scope="col" translate-context="Title" translate-comment="table heading for the domains page table listing of addresses" translate>Status</th>
                                    <th scope="col">
                                        <span translate-context="Title" translate-comment="table heading for the domains page table listing of addresses" translate>Catch-All</span>
                                        <a href="https://protonmail.com/support/knowledge-base/catch-all/" target="_blank">
                                            <i class="fa fa-info-circle" pt-tooltip-translate="Set a catch-all address for your domain." pt-tooltip-translate-context="Info"></i>
                                        </a>
                                    </th>
                                    <th scope="col" class="text-right actions" translate-context="Title" translate>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="address in domain.Addresses | orderBy: 'Order'" ng-class="{'disabled': address.Status === 0}">
                                    <td>
                                        <a ui-sref="secured.members({action: 'edit', id: address.MemberID})" ng-bind="member(address.MemberID).Name" class="text-purple"></a>
                                    </td>
                                    <td ng-bind="address.Email"></td>
                                    <td>
                                        <span class="pm_badge success" ng-show="address.Status === 1 && address.Receive === 1" translate translate-comment="address state badge" translate-context="Address state badge">Enabled</span>
                                        <span class="pm_badge error" ng-show="address.Status === 0" translate translate-comment="address state badge" translate-context="Address state badge">Disabled</span>
                                        <span class="pm_badge warning" ng-show="address.HasKeys === 0" translate translate-comment="address state badge" translate-context="Address state badge">Missing keys</span>
                                    </td>
                                    <td class="domains-catchAll-container">
                                        <custom-checkbox
                                            class="domains-catchAll-input"
                                            data-custom-ng-model="address.catchall"
                                            data-custom-ng-change="changeCatchall(address, domain)"
                                            data-custom-ng-init="address.catchall = !!address.CatchAll"
                                            ></custom-checkbox>
                                    </td>
                                    <td class="text-right">
                                        <address-btn-actions
                                            data-model="address"
                                            data-action="enable"
                                            ng-if="address.Status === 0 && address.Type !== 1 && address.Type !== 4"
                                            class="pm_button link"></address-btn-actions>

                                        <address-btn-actions
                                            data-model="address"
                                            data-action="disable"
                                            ng-if="address.Status === 1 && address.Type !== 1 && address.Type !== 4"
                                            class="pm_button link"></address-btn-actions>

                                        <address-btn-actions
                                            data-model="address"
                                            data-action="remove"
                                            ng-if="address.Status === 0 && address.Type === 3"
                                            class="pm_button link"></address-btn-actions>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="alert alert-info" ng-show="domains.length === 0">
                    <p>
                        <strong translate-context="List domains" translate>No custom domain addresses found</strong>
                    </p>
                    <p translate-context="List domains" translate>Please add a custom domain before configuring addresses.</p>
                </div>
            </section>
        </div>
    </div>
</div>
